<template>
    <div class="basic-info card">
        <div class="title">教育情况</div>
        <div class="form-box">
            <el-form :model="formInline" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12" :xs="24">
                        <el-form-item label="毕业学校">
                            <el-input v-model="formInline.university" placeholder="请输入毕业学校" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="专业名称">
                            <el-input v-model="formInline.speciality" placeholder="请输入专业名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="毕业时间">
                            <el-date-picker v-model="formInline.graduationTime" type="date" placeholder="请选择毕业时间" clearable
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="学历">
                            <el-select v-model="formInline.education" placeholder="请选择学历" clearable>
                                <el-option label="小学" value="0" />
                                <el-option label="初中" value="1" />
                                <el-option label="高中" value="2" />
                                <el-option label="大学" value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="text-center">
                <div style="width: 164px;"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue']);
const formInline = useVModel(props, 'modelValue', emit)
</script>
<style scoped lang="scss">
.basic-info {
    padding: 19px 16px;

    :deep(.el-form) {
        .el-date-editor {
            --el-date-editor-width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }

    .form-box {
        display: flex;
        column-gap: 20px;
    }
}
</style>